<template>
  <div class="wisdom-list">
    <ul>
      <li v-for="(item,index) in WisdomList" :key="index">
        <div class="heading">
          <img :src="item.image" alt="image">
        </div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="detail">
          {{ item.detail }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import imgUrl from '@/assets/img/third/img.png'
import imgUrl1 from '@/assets/img/third/img_1.png'
import imgUrl2 from '@/assets/img/third/img_2.png'
import imgUrl3 from '@/assets/img/third/img_3.png'

export default {
  data() {
    return {
      WisdomList: [
        {
          image: imgUrl,
          title: "线下互动课堂",
          detail: "多种互动教学工具，沉浸式学习体验，精准化学习。"
        },
        {
          image: imgUrl1,
          title: "混合教学全过程管理",
          detail: "课前课中课后全过程教学管理，教学数据可视化，可留存，提升教学质量。"
        },
        {
          image: imgUrl2,
          title: "在线直播教室",
          detail: "在线直播教学搭配教学互动，充分还原真实的教学场景，提升教学效果。"
        },
        {
          image: imgUrl3,
          title: "在线课程建设",
          detail: "在线直播课、精品慕课资源、课程资源体系搭建，沉淀教学资源。"
        },
      ]
    }
  }
}
</script>

<style scoped>
.wisdom-list{
  margin-top: 82px;
}
ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li {
  list-style-type: none;
  width: 370px;
  height: 345px;
  padding: 0 30px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 20px 20px 100px -63px #8297b2;
}

.heading {
  width: 87px;
  height: 82px;
  margin: 24px auto 32px;
}
img{
  width: 87px;
  height: 82px;
}
.title {
  font-weight: 600;
  color: #1f2023;
  font-size: 30px;
  margin-bottom: 8px;
}
.detail{
  font-size: 19px;
  color: #74787c;
  line-height: 32px;
}
</style>